<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台主页面</title>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
<!--      根据提供的数据.动态的展示-->
      function createTable(data){
          var table = document.createElement('table');
          var thead = document.createElement('thead');
          var tbody = document.createElement('tbody');
          //设置表格边框
          table.style.border = '1px solid black';
          //表头
          var theadTr = document.createElement('tr');
          theadTr.style.border = '1px solid black';
          for(var key in data[0]){
              var th = document.createElement('th');
              th.style.border = '1px solid black';
              //把遍历到的对象的字段名内容，作为列标题填入到标题行
              th.appendChild(document.createTextNode(key));
              theadTr.appendChild(th);
          }
          thead.appendChild(theadTr);
          table.appendChild(thead);

          //根据数据的个数动态的创建表格数据
          data.forEach(function(item){
              var tr = document.createElement('tr');
              for(var key in item){
                  var td = document.createElement('td');
                  td.style.border = '1px solid black';
                  td.appendChild(document.createTextNode(item[key]));
                  tr.appendChild(td);
              }
              tbody.appendChild(tr);
          });
          table.append(tbody);
          return table;
      }
<!--    发起一个请求获取列表数据-->
  var config= {
    method:"GET",
    url:"/java/product?method=allList",
      async:true,
      dataType:"json",
      success:function (resp){
        console.log(resp);
        if (resp.code===2001){
        //     调用创建表格的函数传入数据
            var tb=createTable(resp.repo);
            var divShow=document.getElementById("show_table");
            divShow.appendChild(tb);
        }else if (resp.code===2002){
            alert(resp.msg);
        }

      }

  }
$.ajax(config)
  </script>

</head>
<body>
<!--  创建一个表格，，吧所有的库存产品信息在该页面中-->
<h1>产品仓库管理后台后</h1>
<div id="show_table">
<a href="add.html">新增入库</a>
    <a href="remove.html">删除库存</a>
</div>
</body>
</html>